import React, {useEffect} from "react";
import {ActionType, ModalForm, ProColumns} from "@ant-design/pro-components";
import {ProTable} from "@ant-design/pro-table";
import {API} from "@/services/typings";
import {deleteUserRoleAPI, pageRole} from "@/pages/system/role/api";
import {Button, message, Popconfirm, Tooltip} from "antd";
import {AppstoreOutlined} from "@ant-design/icons";

interface RoleAssignmentModalProps {
  userId: string;
}

const RoleAssignmentModal: React.FC<RoleAssignmentModalProps> = ({userId}) => {
  const actionRef = React.useRef<ActionType>();
  const columns: ProColumns<API.IRole>[] = [
    {
      title: '角色名称',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '角色键值',
      dataIndex: 'roleKey',
      key: 'roleKey',
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      render: (_, record) => [
        <Popconfirm
          title={"确认删除用户角色吗？"}
          key="delete"
          onConfirm={async () => {
            const {data} = await deleteUserRoleAPI(record.id as any, userId)
            if (data) {
              actionRef.current?.reload();
              message.success('删除成功')
            }
          }}
        >
          <a style={{color: 'red'}}>删除</a>
        </Popconfirm>
      ],
    },
  ];

  useEffect(() => {

  }, [userId]);
  return (
    <ModalForm
      title={'分配角色'}
      autoFocusFirstInput
      trigger={<Tooltip title="已有角色">
        <Button shape="circle" size="small" icon={<AppstoreOutlined />} />
      </Tooltip>}
      modalProps={{destroyOnClose: true}}
    >
      <ProTable<API.IRole>
        rowKey="id"
        headerTitle={'角色列表'}
        columns={columns as any}
        request={async (params) => {
          const {data} = await pageRole({...params, userId: userId, includeUser: "in"});
          return data
        }}
        actionRef={actionRef}
        tableAlertRender={false}
        size={'small'}
        search={{
          labelWidth: 'auto',
        }}
        pagination={{
          pageSize: 10,
        }}
      />

    </ModalForm>
  );
};

export default RoleAssignmentModal;
